<template>
	<view class="check-in">
		<view class="reminder">
			<view class="reminder-title">
				温馨提示
			</view>
			<view class="reminder-content">
				<view v-for="item in reminder" :key="item.value">
					{{item.label}}
				</view>
			</view>
		</view>
		<view class="check-in-main">
			<view class="card-row"><label>姓&emsp;&emsp;名：</label><view>{{userInfo.name||''}}</view></view>
			<!-- <view class="card-row"><label>性&emsp;&emsp;别：</label><view>{{userInfo.sex||''}}</view></view>
			<view class="card-row"><label>证件号码：</label><view>{{userInfo.cardNo||''}}</view></view> -->
			<view class="card-row"><label>体检类型：</label><view>{{routeParams.healthTypeName||''}}</view></view>
			<view class="card-row"><label>体检套餐：</label><view>{{routeParams.comboName||''}}</view></view>
			<view class="card-row"><label>联系电话：</label>
				<view class="check-in-main-input">
					<input type="text" :value="formInfo.telephone" maxlength="11" placeholder="请填写联系电话" placeholder-style="font-size:30rpx;padding:0;"/>
				</view>
			</view>
			<view class="card-row"><label>婚姻状况：</label>
				<view @click="showMarry=true" class="check-in-main-input" :style="{color:formInfo.maritalStatusName?'#555':''}">{{formInfo.maritalStatusName||'点击选择婚姻状况'}}</view>
			</view>
			<view class="card-row"><label>体检时间：</label>
				<view @click="onClickDate" class="check-in-main-input" :style="{color:formInfo.appointmentDate?'#555':''}">{{formInfo.appointmentDate||'点击选择体检时间'}}</view>
			</view>
			<view class="theme-light-btn grad-home-register" style="height: 90rpx;margin-top: 40rpx;" @click="onSubmit">预约登记</view>
		</view>
		<u-select v-model="showMarry" :list="list" @confirm="confirm($event,'maritalStatus')"></u-select>
		<!-- #ifndef MP-ALIPAY -->
		<u-picker v-model="showDate" mode="time" @confirm="confirm($event,'appointmentDate')"></u-picker>
		<!-- #endif -->
		<!-- 登记确认 -->
		<PopCard :show='showCard' :closeIcon='false' title='体检预约信息确认'>
			<view slot='content' class="content">
				<view class="card-row">
					<label>姓&emsp;&emsp;名：</label>{{userInfo.name}}
				</view>
				<view class="card-row">
					<label>性&emsp;&emsp;别：</label>{{userInfo.sex}}
				</view>
				<view class="card-row">
					<label>证件号码：</label>{{userInfo.cardNo}}
				</view>
				<view class="card-row">
					<label>体检类型：</label>{{routeParams.healthTypeName}}
				</view>
				<view class="card-row">
					<label>体检套餐：</label>{{routeParams.comboName}}
				</view>
				<view class="card-row">
					<label>联系电话：</label>{{formInfo.telephone}}
				</view>
				<view class="card-row">
					<label>婚姻状况：</label>{{formInfo.maritalStatusName}}
				</view>
				<view class="card-row">
					<label>体检时间：</label>{{formInfo.appointmentDate}}
				</view>
				<view class="confirm-btn">
					<view @click="onCancel">
						取消
					</view>
					<view @click="onConfirm">
						确认
					</view>
				</view>
			</view>
		</PopCard>
		<Load :load="load" />
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import Load from '@/components/Load/index.vue'
	import { poComboRegister, deComboRegister } from '@/api/physical.js'
	import { mapGetters } from 'vuex'
	import PopCard from '@/components/PopCard/index.vue'
	export default {
		components:{ Load, PopCard },
		data() {
			return {
				reminderList:[
					{
						label:'1.体检预约只能预约当前绑定就诊人的信息',
						value:'label1'
					},
					{
						label:'2.联系电话需要填写真实可联系的手机号',
						value:'label2'
					},
					{
						label:'3.注意查看检查检验须知，需要空腹的项目请注意保持空腹，方可进行体检',
						value:'label3'
					}
				],
				formInfo:{
					telephone:'',
					maritalStatus:'',
					maritalStatusName:'',
					appointmentDate:''
				},
				load:false,
				showMarry:false,
				showDate:false,
				routeParams:'',
				showCard:false,
				susInfo:'',//预约登记成功后的返回信息
				list: [
					{
						value: '0002',
						label: '未婚'
					},
					{
						value: '0003',
						label: '已婚'
					},
					{
						value: '0001',
						label: '不详'
					}
				],
			}
		},
		computed:{
			reminder(){
				return this.reminderList
			},
			getPhone(){
				if(this.userInfo.phoneNumber){
					this.formInfo.telephone = this.userInfo.phoneNumber
				}
				return false
			},
			...mapGetters(['userInfo'])
		},
		async onLoad(op){
			this.routeParams = op.data?JSON.parse(op.data):''
			await this.$onLaunched
			if(!this.userInfo.patId){
				uni.redirectTo({
					url:'/pages/Login/index'
				})
				return
			}
		},
		methods: {
			onClickDate(){
				// #ifndef MP-ALIPAY
				this.showDate = true
				// #endif
				// #ifdef MP-ALIPAY
				let _this = this;
				my.datePicker({
					startDate: dayjs().format('YYYY-MM-DD'),
				    endDate: '2045-01-01',
				    success: (res) => {
						_this.formInfo.appointmentDate = res.date
				    },
				});
				// #endif
			},
			confirm(e,key){
				if(key==='appointmentDate'){
					this.formInfo[key] = `${e.year}-${e.month}-${e.day}`
				}else{
					this.formInfo[key] = e[0].value
					this.formInfo[key+'Name'] = e[0].label
				}
			},
			onSubmit(){
				if(!this.formInfo.telephone){
					this.$u.toast('请填写联系电话')
					return
				}
				if(!this.formInfo.maritalStatus){
					this.$u.toast('请选择婚姻状况')
					return
				}
				if(!this.formInfo.appointmentDate){
					this.$u.toast('请选择体检日期')
					return
				}
				this.load = true
				let params = {
					...this.formInfo,
					comboId:this.routeParams.comboId,
					healthTypeId:this.routeParams.healthTypeId,
					patientId:this.userInfo.patId
				}
				poComboRegister(params).then(data => {
					this.load = false
					this.susInfo = data||''
					if(data.healthNo&&data.cfxh){
						this.showCard = true
					}else{
						this.$u.toast('系统错误，未预约登记成功')
					}
				}).catch(e => {
					this.load = false
				})
			},
			onCancel(){
				this.load = true
				deComboRegister({healthNo:this.susInfo.healthNo}).then(data => {
					this.load = false
					this.showCard = false
					this.$u.toast('取消登记成功')
				}).catch(e => {
					this.load = false
				})
			},
			onConfirm(){
				this.showCard = false
				uni.redirectTo({
					url:'/pages/Pay/prescriptionPay?cfxhhj=' + this.susInfo.cfxh
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.check-in{
		background-color: #FFFFFF;
		height: calc(100vh);
		overflow: scroll;
		.reminder-content{
			>view{
				margin: 10rpx 0;
			}
		}
		&-main{
			padding: 0 30rpx;
			.card-row{
				>view{
					flex: 1;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 28rpx;
					padding-left: 5px;
				}
				>.check-in-main-input{
					>input{
						padding: 0;
						font-size: 28rpx;
					}
					border-bottom: 1px solid $border-color;
					color: #cacaca;
				}
			}
		}
		.content{
			padding: 30rpx;
		}
	}
</style>